<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" type="text/css" href="/H5/css/main.css?v=51" />
</head>
<body>
    <div class="page-group ms-controller" :controller="goodsvip">
        <div class="page page-current" style="max-width: 540px;">
            <div class="content visibility" style="padding-top: 90px">
                <ul class="logo" style="position: fixed; top: 0; z-index: 9999999;max-width:540px;">
                    <a href="javascript:window.history.go(-1);"><li class="logo_left" style="background:url(/H5/images/l.png) 20% center no-repeat; background-size:12px;"></li></a>
                    <li class="logo_center" style="background-color: #fff; padding-top: 8px">
                        <div class="search-input col-80" style="height: 25px">
                            <label class="icon icon-search" for="search"></label>
                            <input type="search" :on-focus="@search" id='search' style="height: 24px; border: 1px solid #eee; background-color: #eee"/>
                        </div>
                    </li>
                    <ul class="TableUl" :on-click="@getList($event)">
                        <li>综合</li>
                        <li>销量</li>
                        <li style="background:url(/H5/images/jiantou.png) 80% center no-repeat; background-size:10px;">价格</li>
                        <li style="background:url(/H5/images/shalou.png) 80% center no-repeat; background-size:10px;">筛选</li>
                    </ul>
                </ul>
                <div :for="el in goods" class="free" style="text-align: center;width: 98%;margin: auto;">
                    <ul class="product" style="text-align: left">
                        <li :for="e in el.list" :on-click="@jump(e.id)" style="width: 49%;margin-left: 1%">
                            <a :css="{'background-image': e.poster?'url('+e.poster+')':'url(/H5/images/wt.png)'}" class="goods" style="display: block;width: 100%;height: 200px;background-size: contain; background-position: center; background-repeat: no-repeat;">
                            </a>
                            <div class="ProductText">
                                <h5>{{e.title}}{{" "+e.intro}}</h5>
                                <h3><span style="font-size: .5rem; color: red; float: left">￥{{e.vip_price}}</span><span  style="font-size: .4rem; text-decoration: line-through; color: #aaa; float: left; margin-left: 4px">￥{{e.sell_price}}</span><span style="font-size: .4rem; color: #aaa; float: right">已售：{{e.sell_num}}件</span></h3>
                            </div>
                        </li>
                    </ul>
                </div>
                <footer>
                    <p class="bah"></p>
                </footer>
            </div>
        </div>
    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js?v=11' charset='utf-8'></script>
    <script>
        var goodstype = avalon.define({
            $id: "goodsvip",
            mode: "asc",
            iv: simpleStorage.get( 'inviteCode' ),
            goods: [],
            id: Mall.parseUrl(window.location.href).id,
            jump: function( id ){
                window.location.href = goodstype.iv?'/H5/detail?id='+id+'&inviteCode='+goodstype.iv:'/H5/detail?id='+id
            },
            search: function(){
                window.location.href = "/H5/search"
            },
            getList: function( e ){
                goodstype.list = [];
                var postData = {}
                if( e ){
                    if( $( e.target ).text() == "综合" ){
                        
                    }
                    else if( $( e.target ).text() == "销量" ){
                        postData = {
                            order: "sell_num",
                            mode: "desc"
                        }
                    }
                    else if( $( e.target ).text() == "价格" ){
                        this.mode = this.mode == "desc" ? "asc" : "desc";
                        postData = {
                            order: "vip_price",
                            mode: this.mode
                        }
                    }
                    $( ".TableUl li" ).removeClass( "c_active" )
                    $( e.target ).addClass( "c_active" )
                }
                postData.page_size = 200;
                postData.id = goodstype.id;
                Mall.request( "/api/GoodsVip", postData )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            goodstype.goods = data.data.goods;
                            goodstype.vip_level = data.data.vip_level;
                            avalon.scan( document.body );
                        }
                        $(".content").removeClass("visibility")
                    } )
            },
        })
        goodstype.getList();
        $( $( ".TableUl li" )[0] ).addClass( "c_active" )
    </script>
</body>
</html>